<template>
    <div class="playList">
        <h2>分类歌单</h2>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="item in ClassityData" :key="item.id">
                    <div class="cover_num">
                        <img :src="item.cover_url_big" alt="">
                        <span>{{(item.access_num/10000).toFixed(1)}}万</span>
                    </div>
                    <span>{{item.title}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import BScroll from "better-scroll";
export default {
    data() {
        return{
            ClassityData:[]
        }
    },
    methods:{
        getPlayList(){
            axios.get("/api/recommend/playlist")
            .then(res => {
                console.log(res.data.data.list)
                this.ClassityData=res.data.data.list
                this.betterScrollHorizontal(this.ClassityData.length,109)
            })
            .catch(err => {
                console.error(err); 
            })
        },
        betterScrollHorizontal(num,itemWidth){
            let width =num * itemWidth;
            this.$refs.content.style.width=width +"px";
            this.$nextTick(()=>{
                this.scroll =new BScroll(this.$refs.wrapper,{
                    click:true,
                    startX:0,
                    scrollX:true,//水平横向
                    scrollY:false
                })
            });
        }
    },
    mounted(){
        this.getPlayList()
    },
    // filters:{
    //     numFiler(value,num){
    //         return parseFloat(value).toFixed(num)
    //     }
    // }
}
</script>
<style scoped>
.playList{
    width: 90%;
    margin: 0 auto;
}
.playList>h2{
    font-size: 20px;
    text-align: left;
}
    .wrapper{
        width: 100%;
        overflow: hidden;/*超出部分隐藏*/ 
    }
    .my-swipe .van-swipe-item img{
        width: 90%;
        border-radius: 20px;
        margin: 0 auto;
    }
  ul.content>li{
      width:109px;
      display: inline-block;
      vertical-align: top;
      text-align: center;
  }
   ul.content>li img{
       width: 90%;
       border-radius: 20px;
   }
   ul.content>li>span{
       width: 90%;
       margin: 0 auto;
       display: block;
       font-size: 12px;
       height: 35px;
   }
   .cover_num{
       position: relative;
   }
   .cover_num>span{
       position: absolute;
       right: 10px;
       bottom: 5px; 
       z-index: 100;  
       background-color: gray;    
       border-radius: 20px;
       width: 71px;
   }
</style>